<template>
	<view class="content">
		<view class="nav">
			<view class="navs">店铺管理</view>
		</view>
		<view class="store-name">
			<view class="mes" v-for="(item,index) in messageList">
				<view class="pattern">
					{{item.txt}}
					<view class="plant" :style="index>0?'color:#999':'color:#333'">{{item.plant}}<image :src="item.img"></image></view>
				</view>
			</view>
			<view class="mes" v-for="(item,index) in skinList">
				<view class="pattern skin">
					{{item.txt}}
					<view class="plant"><image :src="item.img"></image></view>
				</view>
			</view>
			<view class="mes" v-for="(item,index) in recommendList">
				<view class="pattern skin">
					{{item.txt}}
					<view class="plant plants">{{item.plant}}<image :src="item.img"></image></view>
				</view>
			</view>
			<view class="menuList">
				<view class="menuLists" v-for="(item,index) in menusList">
					<image :src="item.img"></image>
					<view class="brief">
						<view class="organic">{{item.txt}}</view>
						<view class="price">{{item.price}}<image :src="item.pic"><text class="adress">{{item.add}}</text></image></view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="foot"  v-for="(item,index) in footList" @click="getUrl(item.url)">
					<image :src="item.img"></image>
					<view :style="item.txt=='商家设置'?'color:#55C47D':''">{{item.txt}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				messageList:[
					{txt: "店铺名称*",plant: '徐胖胖',img: '/static/img/store-more.png'},
					{txt: "经营地址",plant: '设置店铺介绍',img: '/static/img/store-more.png'},					
				],
				skinList:[
					{txt: "店铺皮肤",img: '/static/img/store-more.png'},		
				],
				recommendList:[
					{txt: "店铺货品推荐",plant: '更换推荐货品',img: '/static/img/store-more.png'}
				],
				menusList:[
					{img: '/static/img/store-one.png',txt: '纯正有机娃娃菜',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '临沂'},
					{img: '/static/img/store-two.png',txt: '烟台红富士',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '烟台'},
				],
				footList:[
					{img:'/static/img/pro-index.png',txt: '首页',url:'storeguanli'},
					{img:'/static/img/pto-jieshao.png',txt: '商家介绍',url:'provider'},
					{img:'/static/img/pro-shezhiactive.png',txt: '商家设置',url:'storeset'}
				]
			}
		},
		methods: {
			getUrl(url){
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
.content{
	color: #333;
	.nav{
		padding-top: 70upx;
		.navs{
			text-align: center;
			font-size:36upx;
			font-weight:500;
		}
	}
	.store-name{
		width:100%;	
		background-color: #F7F4F8;
		.mes{
			background-color: #fff;
			.pattern{
				padding: 35upx 30upx;
				font-size: 30upx;
				border-bottom: 1px solid #FCF9FC; 
				color: #333;
				.plant{
					float: right;
					font-size: 28upx;
					image{
						width: 25upx;
						height: 25upx;
						vertical-align: middle;
						padding-left: 23upx;
					}
				}	
			}
			.skin{
				margin-top: 20upx;
				border-bottom:none;
				.plants{
					color: #999;
				}
			}
		}
	}
	.menuList{
		width: calc(100% - 60upx);
		padding: 0 30upx;
		display: flex;
		justify-content:space-around;
		flex-wrap: wrap;
		background-color: #fff;
		.menuLists{
			width: 335upx;
			background-color: #fff;
			margin-bottom: 20upx;
			box-shadow: 0upx 4upx 5upx 5upx rgba(55,55,55,0.1);
			border-radius: 15upx;
			image{				
				width: 335upx;
				height: 280upx;
				 border-radius: 15upx 15upx 0upx 0upx;
				display: block;  //图片下面的1px
			}
			.brief{
				padding: 13upx 13upx 30upx 13upx;
				.organic{
					font-size: 32upx;
					line-height: 50upx;
				}
				.price{
					font-size: 28upx;
					color: #F40E0E;
					display: flex;
					flex-wrap: nowrap;
					image{
						width: 19upx;
						height: 25upx;
						padding: 5upx 7upx 0 50upx;
					}
					.adress{
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 100upx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		.foot{
			width: 33.3%;
			text-align: center;
			font-size: 24upx;
			padding-top: 10upx;
			image{
				width: 42upx;
				height: 40upx;
			}
		}
	}
}
</style>
